<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
</head>
<body>


<!--form2-->
<form class="layui-form" id="emform" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" placeholder="请输入联系人名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block">
            <input type="text" name="address" placeholder="请输入地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-block">
            <input type="text" name="phone" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
        </div>
    </div>

</form>



<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    </div>
</script>

<table class="layui-hide" id="emtable" lay-filter="emtable"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script type="text/javascript">

    layui.use(['table','jquery','layer','form','upload'],function () {
        var table=layui.table;
        var $=layui.jquery;
        var layer=layui.layer;
        var form=layui.form;
        var upload=layui.upload;
        table.render({
            elem: '#emtable'
            , url: '/user/list'
            , toolbar:'#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar:[]
            , title: '员工数据表'
            , cols: [
                [
                {type: 'numbers', title: '编号',align: 'center'}
                ,{field: 'name', title: '名称', edit: 'text',align: 'center'}
                ,{field: 'address', title: '地址', edit: 'text',align: 'center'}
                ,{field: 'phone', title: '电话', edit: 'text',align: 'center'}
                    ,{field: 'right' ,title: '操作', toolbar:'#barDemo',align: 'center'}
            ]
            ]
            ,parseData:function (res) {
                return{
                    "code":0,
                    // "msg":res.msg,
                    // "count":res.data.totalConut,
                    "data":res
                }
            }

        });



        // toolbar
        table.on('toolbar(emtable)',function (obj) {
            var layevent=obj.event;
            var checkStatus=table.checkStatus('emtable');

            if(layevent=="add"){
                layer.open({
                    title:'新增联系人',
                    traditional:true,
                    contentType: "application/json",
                    type:1,
                    content:$("#emform"),
                    area:['500px','500px'],
                    btn: ['保存','重置'],
                    btn1:function () {
                        var name = $("#emform").find("input[name='name']").val();
                        var address = $("#emform").find("input[name='address']").val();
                        var phone = $("#emform").find("input[name='phone']").val();

                        $.ajax({
                            url:'/user/insert',
                            type:'post',
                            dataType:'json',
                            data:{
                                "name":name,
                                "address":address,
                                "phone":phone,
                            },
                            success:function (res) {
                                if(res.success){
                                    layer.closeAll('page');
                                    layer.msg(res.msg);
                                    $("#emform").find("input").val('');
                                    table.reload('emtable',{});
                                }
                                console.log(res)

                            }
                        })

                    },
                    btn2:function () {
                        $("#emform").find("input").val('');
                    },
                    success:function () {
                        $("#emform").find("input").val('');
                    },
                    cancel:function () {
                        $("#emform").find("input").val('');
                    }
                })
            }
        })

        // tool
        table.on('tool(emtable)',function (obj) {
            var layevent=obj.event;
            var data=obj.data;
            var tr=obj.tr;
            if(layevent=="del"){
                $.ajax({
                    url:'/user/delete',
                    type:'post',
                    dataType:'json',
                    data:{
                        "id":data.id,
                    },

                    success:function (res) {
                        if (res.success){
                            layer.msg(res.msg);
                            $(tr).remove();
                        }

                    }
                })
            }

            if(layevent=="edit"){
                layer.open({
                    title:"编辑联系人信息",
                    type:1,
                    content:$("#emform"),
                    area:['500px','300px'],
                    btn:['保存','重置'],
                    btn1:function () {
                        $.ajax({
                            url:'/user/update',
                            type:'post',
                            dataType:'json',
                            data:{
                                "id":data.id,
                                "name":$("#emform").find('input[name="name"]').val(),
                                "address":$("#emform").find('input[name="address"]').val(),
                                "phone":$("#emform").find('input[name="phone"]').val(),
                            },
                            success:function (res) {
                                if(res.success){
                                    layer.closeAll('page');
                                    layer.msg(res.msg);
                                    $("#emform").find('input').val('');
                                    table.reload('emtable',{});
                                }

                            }
                        })
                    },
                    btn2:function(){
                        $("#emform").find('input[name="name"]').val(data.name);
                        $("#emform").find('input[name="address"]').val(data.address);
                        $("#emform").find('input[name="phone"]').val(data.phone);
                    },
                    success:function () {
                        $("#emform").find('input[name="name"]').val(data.name);
                        $("#emform").find('input[name="address"]').val(data.address);
                        $("#emform").find('input[name="phone"]').val(data.phone);
                    }

                })

            }

        })

    })
</script>
</body>
</html>